<template>
  <div>
    我是父组件
    <div>我是初始值：{{ count }}</div>
    <div>我是初始数组：{{ arr }}</div>
    <div>我是子传过来的{{ zi }}</div>
    <SonView
      :count="count"
      :arr="arr"
      @sendToParent="zichuanfudianji"
      @delete="deletecount"
      ref="expostson"
    ></SonView>
    <button @click="baoluo">暴露的方法父组件的按钮改变子的值</button>
  </div>
</template>

<script setup>
import SonView from './SonView.vue'
import { ref } from 'vue'
//组合写法
const zi = ref()
const count = ref(10)
const arr = ref({
  name: 'xiaohei',
  age: 19
})
const zichuanfudianji = (data) => {
  zi.value = data
  count.value++
}
const deletecount = (data) => {
  console.log(data, 'delete传递的值')
}
//defineExpose暴露的用ref获取节点或者ref的方法
const expostson = ref()
const baoluo = () => {
  expostson.value.expostval(200)
  expostson.value.sendToParent()
}

//另一种写法 非组合写法
export default {
  components: {
    SonView
  },
  setup() {
    const zi = ref('')
    const count = ref(10)
    const arr = ref({
      name: 'xiaohei',
      age: 19
    })
    const zichuanfudianji = (data) => {
      console.log(data)
      zi.value = data
    }
    return {
      zi,
      count,
      arr,
      zichuanfudianji
    }
  }
}
</script>

<style scoped>
</style>